<template>
  <!-- 问专家 -->
  <div class="con">
    <Header :title="'在线咨询'" />
    <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" />
    <div class="content">
      <img
        src="http://qvxb53t4o.hd-bkt.clouddn.com/expert/banner.png"
        alt=""
        class="banner"
      />
      <div class="nav">
        <div>
          <div>
            <div class="top">
              <img
                src="http://qvxb53t4o.hd-bkt.clouddn.com/expert/icon1.png"
                alt=""
              />
              <span>名医工作室</span>
            </div>
            <div class="bottom">主任院长 顶级名医</div>
          </div>
        </div>
        <div>
          <div>
            <div class="top">
              <img
                src="http://qvxb53t4o.hd-bkt.clouddn.com/expert/icon1.png"
                alt=""
              />
              <span>爱心义诊</span>
            </div>
            <div class="bottom">在线问医仅需 1元</div>
          </div>
        </div>
      </div>
      <p class="title">热门门诊</p>
      <div class="hot">
        <div v-for="item in hot" :key="item.id" @click="goTo">
          <img :src="item.img" alt="" />
          <p>{{ item.title }}</p>
        </div>
      </div>
      <p class="title">名医推荐</p>
      <div class="doctor" v-for="item in doctor" :key="item.id">
        <div class="line"></div>
        <div class="doctor-c">
          <img :src="item.img" alt="" />
          <div class="doctor-con">
            <p>
              <span>{{ item.name }}</span
              >{{ item.job }}
            </p>
            <p>{{ item.hospital }}·{{ item.department }}</p>
            <div class="other">
              <span
                v-for="value in item.other"
                :key="value.id"
                :style="'background-color:' + value.color"
                >{{ value.msg }}</span
              >
            </div>
            <div class="goodAt">擅长：{{ item.goodAt }}</div>
            <div class="doctor-bottom">
              <p>
                回复率 <span>{{ item.response }}</span
                >&nbsp;&nbsp;咨询 <span>{{ item.consult }}人</span>
              </p>
              <div>￥ {{ item.price }} 咨询</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

import { getIndex } from "../utils/api";

import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

export default {
  setup() {
    const router = useRouter();

    const value = ref("");

    const hot = ref([
      {
        id: 1,
        title: "妇产科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav1.png",
      },
      {
        id: 2,
        title: "儿科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav2.png",
      },
      {
        id: 3,
        title: "内科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav3.png",
      },
      {
        id: 4,
        title: "外科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav4.png",
      },
      {
        id: 5,
        title: "皮肤科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav5.png",
      },
      {
        id: 6,
        title: "耳鼻喉科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav6.png",
      },
      {
        id: 7,
        title: "中医科",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav7.png",
      },
      {
        id: 8,
        title: "更多",
        img: "http://qvxb53t4o.hd-bkt.clouddn.com/expert/nav8.png",
      },
    ]);

    const goTo = () => {
      router.push("/home/seeDoctor/allDepartments");
    };

    const doctor = ref([]);

    const getDoctor = async () => {
      const res = await getIndex();
      doctor.value = res.result[0].doctor;
    };

    onMounted(() => {
      getDoctor();
    });

    return {
      value,
      hot,
      goTo,
      doctor,
      getDoctor,
    };
  },
  components: {
    Header,
  },
};
</script>

<style lang="less" scoped>
.con {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow-x: scroll;
  // white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
}
.content {
  padding: 0 14px;

  .title {
    font-size: 18px;
    color: #333333;
    font-weight: 700;
  }

  .banner {
    width: 348px;
    height: 87px;
    margin: 0 auto;
  }

  .nav {
    display: flex;
    justify-content: space-around;
    margin-top: 15px;

    > div {
      width: 166px;
      height: 68px;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: #333333 0 0 2px;

      > div {
        float: left;

        .top {
          display: flex;
          align-items: center;

          img {
            width: 22px;
            height: 22px;
          }

          span {
            font-size: 18px;
            color: #4d5060;
            margin-left: 6px;
          }
        }

        .bottom {
          width: 126px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #e76c1c;
          font-size: 13px;
          background-color: #fff5e9;
        }
      }
    }
  }

  .hot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    > div {
      width: 25%;
      text-align: center;
      margin: 10px 0;

      img {
        width: 30px;
        height: 30px;
      }

      p {
        font-size: 12px;
        color: #999;
        line-height: 0;
      }
    }
  }

  .doctor {
    .line {
      width: 100%;
      height: 1px;
      background-color: #74727a;
      margin-bottom: 13px;
    }

    .doctor-c {
      display: flex;

      img {
        width: 44px;
        height: 44px;
        margin-right: 11px;
      }

      .doctor-con {
        p {
          font-size: 15px;
          color: #333333;
          margin: 0;

          span {
            font-size: 18px;
            font-weight: 700;
            margin-right: 9px;
          }
        }

        .other {
          margin-top: 13px;

          span {
            font-size: 12px;
            padding: 4px 6px;
            margin-right: 5px;
            line-height: 24px;
            border-radius: 3px;
            color: #fff;
          }
        }

        .goodAt {
          font-size: 13px;
          color: #666;
          margin-top: 20px;
        }

        .doctor-bottom {
          width: 100%;
          height: 65px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          > p {
            font-size: 13px;
            color: #666;

            span {
              font-size: 13px;
              color: #fe7a78;
            }
          }

          > div {
            width: 97px;
            height: 30px;
            border-radius: 15px;
            background-color: #17a2ff;
            text-align: center;
            line-height: 30px;
            font-size: 13px;
            color: #e5f3f9;
          }
        }
      }
    }
  }
}
</style>
